import { createRouter, createWebHistory } from "vue-router";

import HomeView from "@/views/HomeView";
import TestPage from "@/views/TestPage";
import NotFoundView from "@/views/NotFoundView";

import ArticlesListView from "@/views/list/ArticlesListView";
import ArticleDetailsView from "@/views/details/ArticleDetailsView";
import ArticleEditView from "@/views/edit/ArticleEditView";

import EssayListView from "@/views/list/EssayListView";
import EssayDetailsView from "@/views/details/EssayDetailsView";
import EssayEditView from "@/views/edit/EssayEditView";

import BadgeListView from "@/views/list/BadgeListView";
import BadgeContentView from "@/views/details/BadgeContentView";

import CollectionListView from "@/views/list/CollectionListView";
import CollectionContentView from "@/views/details/CollectionContentView";

import UserLoginView from "@/views/UserLoginView";
import UserSpaceView from "@/views/UserSpaceView";

import store from "@/store/index";

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/test/",
    name: "TestPage",
    component: TestPage,
  },
  {
    path: "/login/",
    name: "UserLoginView",
    component: UserLoginView,
    meta: {
      needStaff: false,
    },
  },
  {
    path: "/articles/",
    name: "ArticlesListView",
    component: ArticlesListView,
  },
  {
    path: "/articles/:id/",
    name: "ArticleDetailsView",
    component: ArticleDetailsView,
    props: true,
  },
  {
    path: "/edit/articles/:id/",
    name: "ArticleEditView",
    component: ArticleEditView,
    props: true,
    meta: {
      needStaff: true,
    },
  },
  {
    path: "/essays/",
    name: "EssayListView",
    component: EssayListView,
  },
  {
    path: "/essays/:id/",
    name: "EssayDetailsView",
    component: EssayDetailsView,
    props: true,
  },
  {
    path: "/edit/essays/:id/",
    name: "EssayEditView",
    component: EssayEditView,
    props: true,
    meta: {
      needStaff: true,
    },
  },
  {
    path: "/badges/",
    name: "BadgeListView",
    component: BadgeListView,
  },
  {
    path: "/badge/:id/get_content/",
    name: "BadgeContentView",
    component: BadgeContentView,
    props: true,
  },
  {
    path: "/collection/:id/get_content/",
    name: "CollectionContentView",
    component: CollectionContentView,
    props: true,
  },
  {
    path: "/collections/",
    name: "CollectionListView",
    component: CollectionListView,
  },
  {
    path: "/userspace/",
    name: "UserSpaceView",
    component: UserSpaceView,
    meta: {
      needStaff: true,
    },
  },
  {
    path: "/404/",
    name: "404",
    component: NotFoundView,
  },
  {
    path: "/:catchAll(.*)",
    redirect: "/404/",
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

/**
 * 页面权限检测
 * @description 先确认身份再分发页面，
 */
router.beforeEach((to, from, next) => {
  store
    .dispatch("checkStatus")
    .then(() => {
      if (to.meta.needStaff) {
        if (store.state.user.is_staff) next();
        else next({ name: "404" });
      }
      next();
    })
    .catch((error) => {
      console.log(error);
      if (to.meta.needStaff) {
        console.log("需要权限");
        next({ name: "UserLoginView" });
        return;
      }
      // 确认不是注册用户

      next();
    });
});

export default router;
